Component({
  properties: {
    // 背景颜色
    background: {
      type: String,
      value: '#e5e5e5'
    },
    // 滑块颜色
    barColor: {
      type: String,
      value: '#fff'  
    },
    // 成功背景色
    successBg: {
      type: String,
      value: '#52ccba'
    },
    // 提示文字
    text: {
      type: String,
      value: '请向右滑动验证'
    },
    // 成功文字
    successText: {
      type: String,
      value: '验证通过'
    }
  },

  data: {
    code: '', // 验证码
    inputCode: '', // 用户输入的验证码
    isPass: false
  },

  lifetimes: {
    attached() {
      this.generateCode()
    }
  },

  methods: {
    // 生成4位随机数字验证码
    generateCode() {
      let code = ''
      for(let i = 0; i < 4; i++) {
        code += Math.floor(Math.random() * 10)
      }
      this.setData({ code })
    },

    // 刷新验证码
    refreshCode() {
      this.generateCode()
      this.setData({ inputCode: '' })
    },

    // 输入验证码
    onInput(e) {
      const value = e.detail.value
      this.setData({ inputCode: value })

      // 验证码输入完成时自动验证
      if(value.length === 4) {
        if(value === this.data.code) {
          this.setData({ isPass: true })
          this.triggerEvent('verify', { pass: true })
        } else {
          this.setData({ inputCode: '' })
          this.generateCode()
          wx.showToast({
            title: '验证码错误',
            icon: 'none'
          })
        }
      }
    }
  }
}) 